<template>
  <div class="app-container" style="display:flex;  padding: 0px 0px 0px 0px;">
    <div style="width: 100%;height: 100%;">
      <div class="sc-cxFKTC bPxKMm" style="display: flex; width: 100%; height: 100%;">
        <div style="display: flex; height: var(--content-height); width: 100%;">
          <div style="width: 220px;" class="aside">
            <div style="width: 100%;">
              <el-button type="primary" icon="el-icon-plus" size="medium" style="width: 100%;" @click="handleCreate">
                新建查询对话
              </el-button>
            </div>
            <div class="divider mt16 mb16" />
            <div class="list-box">
              <div class="sc-bBXqJn hEQfCO">
                <div class="sc-bqyKbq felxrv">
                  <div class="flex-row mb16">
                    <div class="header">
                      历史会话
                    </div>
                  </div>
                  <div />
                </div>
                <div class="list-content">
                  <div class="sc-fKFygU vEGhA">
                    <div class="ant-space ant-space-vertical scroll-list" style="gap: 12px;">
                      <div v-for=" (item,index) in questionList" :key="index" class="ant-space-item"
                        :class="{'selected': currentSelectedIndex === index}">
                        <div class="sc-hHftZz kDHkiB nl-message-card  selectable-card">
                          <div class="collapse-header">
                            <div class="flex-row">
                              <div class="flex-row-start title-container" style="align-items: center; width: 100%;">
                                <span style="margin-right: 10px; " class="icon mr8 message-icon"><i
                                    class="el-icon-chat-dot-round" style="color: #2f54eb;" /> </span>
                                <div class="title" style="flex: 1;" @click="questionClick(item ,index)">
                                  <el-tooltip :content="item.name" placement="top">
                                    <span class="title">{{ item.name }}</span>
                                  </el-tooltip>
                                </div>
                              </div>
                              <div class="flex-row-end">
                                <span style="" class="icon mr8 message-icon">
                                  <el-popconfirm title="确定要删除吗?" @onConfirm="handleDelete(item,index)"> <i
                                      slot="reference" class="el-icon-delete" style="color: #2f54eb;" /></el-popconfirm>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content" style="flex: 1;height: calc(100vh - 50px);">
            <div class="sc-idOjMB bwmqVW">
              <div class="dialog-container" style="    overflow: hidden;display: flex;flex-direction: column;">
                <div v-if="qStatus" class="sc-kstpWv fvOmYe">
                  <div class="sc-bqyKbq kxOAuh mb8">
                    <div class="flex-row mb16">
                      <div class="header">
                        HI，欢迎使用知识库问答
                      </div>
                      <div />
                    </div>
                    <div />
                  </div>
                  <div class="description mb16" style="color: rgba(0, 10, 26, 0.47)">
                    我可以回答知识库内文件的任何问题，请试试在下面提问吧
                  </div>
                </div>
                <div v-if="!qStatus" id="dialog-scrollable-div" class="sc-hBEZvw kifJof dialog-container"
                  style="width: 100%;flex-grow: 1;overflow-y: auto;">
                  <div v-for="(item, index) in data" :key="index" class="infinite-scroll-component__outerdiv"
                    style="margin-top: 20px;">
                    <div class="infinite-scroll-component infinite-scroll" style="height: auto; overflow: auto;">
                      <div id="dialog-history-container" class="ant-space ant-space-vertical"
                        style="gap: 24px;width: 100%; ">
                        <div class="ant-space-item">
                          <div class="ant-space ant-space-vertical message-item" style="gap: 24px;width: 100%;">
                            <div class="ant-space-item" style="">
                              <div class="sc-dQpIV cjuVk">
                                <div style="font-size: 14px;">
                                  {{ item.dsl }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="ant-space-item">
                          <div class="sc-pGaPU waiting-indicator">
                            <div style="border: 1px solid #e8e8e8;">
                              <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item name="1">
                                  <div slot="title" class="collapse-title"
                                    style="display: flex;justify-content: space-between; background: rgb(250 250 250);">
                                    <div>推理过程</div>
                                    <div v-if="item.status=='FINISH'" style="margin-right: 5px;">
                                      <i style="color: green;" class="el-icon-success" /> 执行成功，结果已生成
                                    </div>
                                  </div>
                                  <div style="display: flex;flex-direction: column;align-items: center;">
                                    <div class="que">
                                      <div class="wd" @click="queClick(item.wdq)">
                                        <div class="wd1">
                                          <div>
                                            <span style="font-weight: 700;font-size: 14px;">问题</span> <i
                                              class="el-icon-question" />
                                          </div>
                                          <i class="el-icon-arrow-right" />
                                        </div>
                                        <div class="wd2">
                                          {{ item.nl }}
                                        </div>
                                      </div>
                                    </div>

                                    <div v-for="(item1, index1) in item.resultMessage.edges" :key="index1"
                                      style="    display: flex;flex-direction: column;align-items: center;">
                                      <div class="suxian" />

                                      <div class="que" style="margin-top: -20px;">
                                        <div class="wd" @click="queClick(item1.node)">
                                          <div class="wd1">
                                            <div>
                                              <i v-if="item1.node.state=='FINISH'" style="color: green;"
                                                class="el-icon-success" />
                                              <i v-if="item1.node.state!='FINISH'" style="color:blue;"
                                                class="el-icon-time" />

                                              <span v-if="item.resultMessage.edges.length!=index1+1"
                                                style="font-weight: 700;font-size: 14px;">子问题{{ index1+1 }}</span>
                                              <span v-if="item.resultMessage.edges.length==index1+1"
                                                style="font-weight: 700;font-size: 14px;">问题答案</span>
                                            </div>
                                            <i class="el-icon-arrow-right" />
                                          </div>
                                          <div class="wd2">
                                            {{ item1.node.question }}
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </el-collapse-item>
                                <el-collapse-item name="2">
                                  <div slot="title" class="collapse-title"
                                    style="display: flex;justify-content: space-between; background: rgb(250 250 250);">
                                    <div>问题回答</div>
                                  </div>
                                  <div style="padding: 20px 20px 20px 20px;">
                                    <p style="font-size: 14px;margin: 0px;">
                                      问题：<span>{{ item.zquestion }}</span>
                                    </p>

                                    <div style="font-size: 14px;margin: 0px;">
                                      <div v-if="item.zanswer">
                                        答案：{{ item.zanswer }}
                                      </div>

                                      <div v-if="item.zanswer==null" style="display: flex;align-items: center;">
                                        答案：
                                        <div class="spinner" />
                                      </div>
                                    </div>
                                    <div style="margin-top: 20px; font-size: 14px;">
                                      溯源文档
                                    </div>
                                    <div style="margin-top: 10px; display: flex; flex-direction:row;flex-wrap:wrap">
                                      <div v-for="(item2, index2) in item.suyuanarr" :key="index2">
                                        <el-button type="primary" size="mini" plain
                                          style="margin-left: 5px; padding: 4px 4px; height: 22px"
                                          @click="suyuan(item2)">
                                          {{ item2 }}
                                        </el-button>
                                      </div>
                                    </div>
                                  </div>
                                </el-collapse-item>
                              </el-collapse>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="yjzxz" style="display: flex; margin-top: 20px ; margin-bottom: 20px;">
                    <div class="spinner" />
                    <div style="font-size: 14px; margin-left: 10px;">
                      语句执行中… </span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="message-box">
                <div class="sc-bkzXAi fuzjJk">
                  <div style="display: flex;  position: relative;">
                    <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请输入知识库文档相关的任何问题吧~"
                      style="flex-grow: 1;" />
                    <div style="position: absolute; bottom: 5px; right: 5px;">
                      <el-button type="primary" size="medium" icon="el-icon-position" @click="create" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-drawer :title="title" :visible.sync="drawer" :direction="direction">
      <div style="display: flex; flex-direction: column; height: calc(100vh - 50px); overflow: hidden;">
        <div style="padding: 10px 15px 10px 15px; overflow-y: auto; flex-grow: 1; box-sizing: border-box;">
          <div style="margin-bottom: 20px;">
            问题描述
          </div>
          <div class="dagre-detail-drawer-pre-render">
            <p style="  margin-top: 0;">
              {{ question }}
            </p>
          </div>
          <div style="margin-bottom: 20px; margin-top: 10px;">
            问题回答
          </div>
          <div class="dagre-detail-drawer-pre-render">
            <p style="  margin-top: 0;">
              {{ answer }}
            </p>
          </div>
          <div v-if="logStatus">
            <div style="margin-bottom: 20px; margin-top: 10px;">
              上下文信息
            </div>
            <div class="dagre-detail-drawer-pre-render">
              <div class="custom-h2">
                SPO Retriever
              </div>
              <div class="custom-xiaotitle">
                logic_form expression:
              </div>

              <div
                style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(144, 164, 174); background: rgb(250, 250, 250); font-family: &quot;Roboto Mono&quot;, monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;">
                <code class="language-java"
                  style="white-space: pre; text-align: left; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(144, 164, 174); background: rgb(250, 250, 250); font-family: &quot;Roboto Mono&quot;, monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span
                    class="token token" style="color: rgb(124, 77, 255);"><span>{{ sql }}</span></span></code>
              </div>
              <div class="custom-xiaotitle">
                spo retrieved:
              </div>
              <div class="custom-xiaotitle">
                <span v-if="syz==false" style="color: rgba(0, 0, 0, .85);">no spo tuple retrieved.</span>

                <div v-if="syz" style="font-weight:400;display: flex;flex-wrap: wrap; font-size: 14px; color: black;">
                  <div v-for="(itemsyz,syzindex) in syzList" :key="syzindex" style="display: flex; margin-left: 10px;">
                    <div>{{ itemsyz.text }}</div>
                    <div>
                      <el-button type="primary" size="mini" plain
                        style="margin-left: 5px; padding: 4px 4px; height: 22px" @click="suyuan(itemsyz.dh)">
                        溯源
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="tableStatus" class="table" style="margin-top: 20px;">
                <div class="custom-h2">
                  Chunk Retriever
                </div>
                <div style="margin-top: 10px;">
                  <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="mun" label="id" width="50" />
                    <el-table-column prop="content" label="content">
                      <template slot-scope="{row,$index}">
                        <span v-html="row.content.replace(/\n/g, '<br>')" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="mun" label="溯源" width="100">
                      <template slot-scope="{row,$index}">
                        <el-button type="primary" size="mini" plain
                          style="margin-left: 5px; padding: 4px 4px; height: 22px" @click="suyuan(row.dh)">
                          溯源
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="custom-xiaotitle">
                  answer based by fuzzy retrieved:
                </div>
                <div class="custom-xiaotitle">
                  <span style="    color: rgba(0, 0, 0, .85); font-size: 14px;">{{ tabletableQnswerData }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>

import { questionsanswersApi } from '@/api/questionsanswers'

var intervalId
export default {

  data() {
    return {
      stopQuerying: false,
      intervalId: null,
      yjzxz: false,
      zquestion: "",
      zanswer: "",
      question: "",
      answer: "",
      logStatus: false,
      syz: "",
      sql: "",
      tabletableQnswerData: "",
      data: [],
      syzList: [],
      tableStatus: false,
      title: "问题",
      drawer: false,
      direction: 'rtl',
      url: null,
      textarea: null,
      activeNames: ['2'],
      tableData: [],
      questionList: [],
      currentSelectedIndex: null,
      qStatus: true,
      sessionId: null,
      queryId: null,
      postData: {
        "document": "",
        "instruction": "",
        "projectId": null,
        "sessionId": null,
        "userId": 111111,
      }
    }
  },

  mounted() {


    this.getQeuList()

    window.addEventListener('keydown', this.handleEnterPress);


  },

  async created() {

  },
  methods: {

    async suyuan(dh) {

      const response = await questionsanswersApi("getIdBydh", { "dh": dh })
      if (response.code == 200) {
        let url = "/dashboard/docview?id=" + response.data

        window.open(url, '_blank');
      } else {
        this.$notify({
          title: '失败',
          message: "溯源失败",
          type: 'error',
          duration: 1500
        })

      }


    },
    handleEnterPress(event) {
      if (event.key === 'Enter') {
        this.create();
        // 执行你想要的操作
      }
    },

    async create() {

      if (this.textarea == null) {
        this.$notify({
          title: '失败',
          message: "请输入问题",
          type: 'error',
          duration: 1500
        })
        return false
      }
      let data = localStorage.getItem('data');
      var arr = JSON.parse(data)
      const postData = {
        "projectId": arr.project_id,
        "userId": "111111",
        "name": this.textarea,
      }

      this.postData.projectId = arr.project_id;
      this.postData.instruction = this.textarea;

      if (this.sessionId == null) {

        const response = await questionsanswersApi("create", postData)

        if (response.code == 200) {

          this.postData.sessionId = response.data.id;
          this.submit();

        }

      } else {
        this.postData.sessionId = this.sessionId;
        // this.doquery();
        this.submit();
      }



      this.qStatus = false;

    },

    async submit() {
      const response = await questionsanswersApi("submit", this.postData)
      this.yjzxz = true;
      if (response.code == 200) {
        this.queryId = response.data.id;
        this.scrollToBottom()
        this.doquery();
      }

      if (response.code == 300) {
        console.log(300);
      }

      this.textarea = null;


    },

    async doquery() {
      await this.query();  // 首次执行查询
      this.stopQuerying = false;  // 停止查询的标志

      // 定义一个递归函数来保证每次查询完成后再开始下一次查询
      const recursiveQuery = async () => {
        if (this.stopQuerying) return; // 如果标志位为 true，停止查询

        await this.query();  // 等待当前查询完成

        setTimeout(recursiveQuery, 3000);  // 3秒后再执行下一次查询
      };

      // 启动递归查询
      recursiveQuery();

    },

    async query() {

      let data = localStorage.getItem('data');
      var arr = JSON.parse(data)
      let project_id = arr.project_id;

      const response = await questionsanswersApi("query", { id: this.queryId, project_id: project_id })
      this.scrollToBottom()
      if (response.code == 200) {

        if (response.data != "") {

          let res = this.findDataCunzai(response.data['id']);
          // console.log(res);
          if (res === false) {
            this.data.push(this.fuzhidange([response.data]))
            this.yjzxz = false;
          } else {
            this.data.splice(res, 1, this.fuzhidange([response.data]))
          }

          // console.log(response.data.status);
          if (response.data.status == "FINISH") {
            console.log("FINISH");

            this.stopQuerying = true;  // 设置停止查询的标志
            return;  // 结束当前查询

          }

        }
      }

    },


    findDataCunzai(id) {

      console.log(this.data);

      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id == id) {
          return i;
        }
      }

      return false;
    },


    fuzhidange(data) {



      for (let i = 0; i < data.length; i++) {

        let wdq = data[i]['resultMessage']['edges'][0]['from'];
        let wdqnode = this.getNodes(wdq, data[i]['resultMessage']['nodes']);
        data[i]['wdq'] = wdqnode
        data[i]['ly'] = []
        //最后的问答
        let end = data[i]['resultMessage']['edges'].length - 1;

        let zuihouId = data[i]['resultMessage']['edges'][end]['to'];

        let zuihouNOde = this.getNodes(zuihouId, data[i]['resultMessage']['nodes']);

        data[i]['zquestion'] = zuihouNOde.question
        data[i]['zanswer'] = zuihouNOde.answer



        let edges = data[i]['resultMessage']['edges'];


        for (let j = 0; j < edges.length; j++) {
          let id = edges[j]['to']
          let node = this.getNodes(id, data[i]['resultMessage']['nodes']);
          data[i]['resultMessage']['edges'][j]['node'] = node
        }

        let nodes = data[i]['resultMessage']['nodes'];
        for (let nj = 0; nj < nodes.length; nj++) {
          // console.log(nodes[nj]);

          if (nodes[nj].hasOwnProperty('syz')) {
            if (nodes[nj]['syz']) {
              let sanTable = nodes[nj]['sanTable']['sanyaunzu'];
              for (let si = 0; si < sanTable.length; si++) {
                let newDh = sanTable[si]['dh'];

                let isDhExists = data[i]['ly'].some(item => item.dh === newDh);
                if (!isDhExists) {
                  let arr = { "dh": newDh };
                  data[i]['ly'].push(arr);
                }


              }
            }
          }

          if (nodes[nj].hasOwnProperty('tab')) {
            if (nodes[nj]['tab']) {
              let tableList = nodes[nj]['sanTable']['tableList'];
              for (let si = 0; si < tableList.length; si++) {

                let newDh = tableList[si]['dh'];

                let isDhExists = data[i]['ly'].some(item => item.dh === newDh);

                if (!isDhExists) {
                  let arr = { "dh": newDh };
                  data[i]['ly'].push(arr);
                }

                // let arr = { "dh": tableList[si]['dh'] }
                // data[i]['ly'].push(arr);
              }
            }

          }
        }
      }

      return data[0]

    },


    async handleCreate() {
      this.qStatus = true;
      this.textarea = "";
      this.sessionId = null;
      this.data = [];
    },

    async handleDelete(data, index) {



      this.currentSelectedIndex = index;
      const response = await questionsanswersApi("delete", data)

      if (response.code == 200) {
        this.getQeuList()
        this.qStatus = true;
        this.data = [];
      }



    },

    async questionClick(data, index) {
      this.currentSelectedIndex = index;
      let projectData = localStorage.getItem('data');
      var arr = JSON.parse(projectData)


      const response = await questionsanswersApi("questionClick", { "id": data.id, "projectId": arr.id })

      if (response.code == 200) {

        this.fuzhi(response.data);

        this.qStatus = false;

      }

      this.sessionId = response.data[0]['sessionId'];

    },

    async getQeuList() {

      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)


      const response = await questionsanswersApi("getQuestionList", { "id": arr.id })

      if (response.code == 200) {

        this.questionList = response.data

      }

    },

    queClick(data) {


      if (data.hasOwnProperty('question')) {
        this.question = data.question
      }

      if (data.hasOwnProperty('answer')) {
        this.answer = data.answer
      }
      if (data.hasOwnProperty('logs')) {
        this.logStatus = true
      } else {
        this.logStatus = false
      }

      if (data.hasOwnProperty('sql')) {
        this.sql = data.sql
      }

      if (data.hasOwnProperty('syz')) {
        this.syz = data.syz
        this.syzList = data.sanTable.sanyaunzu
      }

      if (data.hasOwnProperty('tab')) {
        this.tableStatus = data.tab
        // this.syzList = data.sanTable.sanyaunzu
        if (data.tab) {
          this.tableData = data.sanTable.tableList
          this.tabletableQnswerData = data.sanTable.tableQnswer


        }

      }




      this.drawer = true;
    },

    async test() {

      const params = {
        type: 1
      }

      const response = await questionsanswersApi("index", params)

      if (response.code == 200) {


        this.fuzhi(response.data);



      }
    },

    fuzhi(data) {



      for (let i = 0; i < data.length; i++) {

        let wdq = data[i]['resultMessage']['edges'][0]['from'];
        let wdqnode = this.getNodes(wdq, data[i]['resultMessage']['nodes']);
        data[i]['wdq'] = wdqnode
        data[i]['ly'] = []

        //最后的问答
        let end = data[i]['resultMessage']['edges'].length - 1;

        let zuihouId = data[i]['resultMessage']['edges'][end]['to'];

        let zuihouNOde = this.getNodes(zuihouId, data[i]['resultMessage']['nodes']);

        data[i]['zquestion'] = zuihouNOde.question
        data[i]['zanswer'] = zuihouNOde.answer



        let edges = data[i]['resultMessage']['edges'];


        for (let j = 0; j < edges.length; j++) {

          let id = edges[j]['to']
          let node = this.getNodes(id, data[i]['resultMessage']['nodes']);
          data[i]['resultMessage']['edges'][j]['node'] = node

        }



        let nodes = data[i]['resultMessage']['nodes'];
        for (let nj = 0; nj < nodes.length; nj++) {
          // console.log(nodes[nj]);

          if (nodes[nj].hasOwnProperty('syz')) {
            if (nodes[nj]['syz']) {
              let sanTable = nodes[nj]['sanTable']['sanyaunzu'];
              for (let si = 0; si < sanTable.length; si++) {

                let newDh = sanTable[si]['dh'];

                let isDhExists = data[i]['ly'].some(item => item.dh === newDh);
                if (!isDhExists) {
                  let arr = { "dh": newDh };
                  data[i]['ly'].push(arr);
                }


                // let arr = { "dh": sanTable[si]['dh'] }
                // data[i]['ly'].push(arr);
              }
            }

          }

          if (nodes[nj].hasOwnProperty('tab')) {
            if (nodes[nj]['tab']) {
              let tableList = nodes[nj]['sanTable']['tableList'];
              for (let si = 0; si < tableList.length; si++) {

                let newDh = tableList[si]['dh'];

                let isDhExists = data[i]['ly'].some(item => item.dh === newDh);
                if (!isDhExists) {
                  let arr = { "dh": newDh };
                  data[i]['ly'].push(arr);
                }

                // let arr = { "dh": tableList[si]['dh'] }
                // data[i]['ly'].push(arr);
              }
            }

          }
        }








      }

      console.log(data);

      this.data = data



    },


    getNodes(id, node) {

      for (let i = 0; i < node.length; i++) {
        if (node[i]['id'] == id) {
          return node[i]
        }
      }



    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });

    },


    handleChange(val) {
      // console.log(val);
    },
    jump() {

      this.$router.push({ path: '/modelextraction/page' });
    },
    scrollToBottom() {
      const scrollableDiv = document.getElementById('dialog-scrollable-div');
      if (scrollableDiv) {
        scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
      }
    },


  }
}
</script>


<style lang="scss" scoped>
.selected {
  border: 1px solid #1890ff; /* 更改为你想要的颜色 */
  border-radius: 5px;
}
.custom-xiaotitle {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;
}
.custom-h2 {
  font-size: 24px; /* 或者具体的像素值如 24px */
  font-weight: bold;
  margin-top: 0em;
  // margin-bottom: 0.83em;
  line-height: 1.3;
  color: #212121; /* 默认颜色可能会有所不同，可以根据需要调整 */
}

.dagre-detail-drawer-pre-render {
  border: 1px solid #000a1a1a;
  border-radius: 6px;
  padding: 6px 8px 12px;
  min-height: 100px;
}

.section-title {
  // position: sticky;
  // top: 0;
  // // padding: 8px 0;
  // margin-bottom: 0;
  // background: #fff;
}

.title {
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 212px;
  font-size: 14px;
}

.suxian {
  height: 80px;
  width: 2px;
  background-color: rgb(221, 221, 221);
  margin-top: -20px;
}
.wd1 {
  background: #f0f5ff;
  padding: 5px 10px 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.wd2 {
  padding: 5px 10px 5px 10px;
  display: flex;

  min-height: 40px;
}
.que {
  display: flex;
  // height: 500px;
  padding: 20px 10px 20px 10px;
  flex-direction: column;
  align-items: center;
}

.wd:hover {
  border: 1px solid #2f54eb;
}

.wd {
  width: 300px;
  min-height: 80px;
  border: 1px solid #e8e8e8;
  // border: 2px solid red; /* 设置边框的颜色为红色，样式为实线，宽度为2px */
  border-radius: 3px; /* 设置圆角的半径为5px */
  cursor: pointer;
}

::v-deep .el-drawer__header {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px;
  margin-bottom: 0px;
}

::v-deep .el-collapse-item__header {
  background: rgb(250 250 250);
  font-size: 14px;
  border-bottom: none;
  margin-left: 5px;
}

::v-deep div[role="tab"][aria-expanded="true"] {
  background-color: rgb(250 250 250);
}

::v-deep .collapse-title {
  background: red;
  flex: 1 0 90%;
  order: 1;
  .el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
  }
}

.dPkVYx {
  background: #f6f9ff;
  border-radius: 6px;
  padding: 16px 24px;
}
.cjuVk {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  padding: 12px 24px;
  white-space: break-spaces;
}

.fvOmYe .description {
  color: rgba(0, 10, 26, 0.47);
}
a.ant-typography,
.ant-typography a {
  color: #2f54eb;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
  text-decoration: none;
}
.kxOAuh .header {
  color: rgb(0 0 0 / 85%);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
.fvOmYe .description {
  color: var(--deep-blue-47);
}

.mb16 {
  margin-bottom: 16px;
}
.mb8 {
  margin-bottom: 8px;
}
.fvOmYe {
  background: #f6f9ff;
  border-radius: 6px;
  padding: 24px;
}

.bwmqVW .dialog-container {
  flex: 1;
}
.bwmqVW {
  margin: 24px 24px 40px;
  padding: 24px 40px;
  background: #fff;
  border-radius: 8px;
  height: calc(100% - 24px * 2);
  display: flex;
  flex-direction: column;
}
.bPxKMm {
  display: flex;
  height: var(--content-height);
}

.hEQfCO .list-content {
  flex: 1;
  overflow: auto;
}

.bPxKMm .aside {
  width: 320px;
  min-width: 320px;
  padding: 24px;
  border-right: var(--solid-border);
  box-shadow: 1px 0px 0 0px #f7f8fa;
}

.bPxKMm .aside .divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 10, 26, 0.06);
}

.mb16 {
  margin-bottom: 16px;
}

.mt16 {
  margin-top: 16px;
}

.flex-row {
  display: flex !important
;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.bPxKMm .content {
  flex: 1;
}

.bPxKMm .aside .list-box {
  height: calc(100% - 80px);
}

.hEQfCO {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.felxrv .header {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.kDHkiB.selectable-card {
  cursor: pointer;
}

.kDHkiB {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.kDHkiB.selected-card {
  border: 1px solid #2f54eb;
  border-radius: 8px;
}

.kDHkiB.nl-message-card .collapse-header {
  border-radius: 8px;
}

.kDHkiB .collapse-header {
  position: relative;
  padding: 8px 8px 8px 8px;
  background-color: #f6f9ff;
  border-radius: 8px 8px 0 0;
}

.flex-row {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-row-start {
  display: flex !important;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.vEGhA .ant-space {
  width: 100%;
}

.vEGhA .scroll-list {
  height: calc(100% - 16px);
  overflow-y: auto;
}
.ant-space-vertical {
  flex-direction: column;
}
.ant-space {
  display: inline-flex;
}

.myTable1 {
  // background-color: #fff;
  padding: 20px 20px 20px 20px;
}

.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 1.5%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.85);
  border-color: #e3e4e6;
  background: #fff;
  outline: 0;
}

.ant-btn-primary {
  color: #fff;
  border-color: #2f54eb;
  background: #2f54eb;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

/* IFRAME 的容器 */
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* IFRAME 样式 */
#myIframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除边框 */
}

/* 遮挡层样式 */
.overlay {
  position: absolute;
  top: 0;
  // left: 60%;
  width: 100%;
  height: 50px; /* 遮挡的高度 */
  background-color: #ebf1f9; /* 可以根据需要调整颜色 */
  z-index: 1; /* 确保遮挡层位于 IFRAME 之上 */
}

/* 等待指示器的整体样式 */
.waiting-indicator {
  // position: fixed;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  // text-align: center;
  background-color: #f6f9ff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 旋转动画 */
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 动画定义 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 文本样式 */
.waiting-indicator p {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>
